<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        // var ul = document.querySelector("ul");
        // 本来是这样写，但是这样只能点li标签已经存在的1，2，3点击后添加的就不能继续添加
        $("li").on("click",function(){
            $("ul").append("<li>123</li>");
        })

        
        // 这样写就可以在添加的元素上点击后继续添加
        $("ul").on("click","li",function(){
            $("ul").append("<li>123</li>");
        })
    </script>
</body>
</html>